<template>
	<view class="boxes" :style="{ '--color': color }">
		<loading-view :loading="!pageData" rows="2" marginTop="20" :rowsWidth="['50%', '100%']" :rowsHeight="[24, 100]">
			<view class="deliveryBox">
				<view class="tabWay" v-if="deliverysArr.length > 1">
					<view
						class="Tabs"
						:class="{
							subint: index == selectedIndex - 1,
							addint: index == selectedIndex + 1,
							Active: index == selectedIndex
						}"
						@click="selectTab(index, item)"
						v-for="(item, index) in deliverysArr"
						:key="index"
					>
						<view class="TabItem">{{ getDeliveryName(item) }}</view>
					</view>
				</view>
				<view class="WayToggle" v-if="delivery == 1 || delivery == 3">
					<view class="expressage" @click="Show">
						<block v-if="Address.Aaddress">
							<view class="Info">
								<view class="downtown" v-if="Address.Aregion">
									<text class="downtown_txt">{{ Address.Aregion }}</text>
									<view class="downtown_More">默认</view>
								</view>
								<text class="address">{{ Address.Aaddress }}</text>
								<view class="contact">
									<text class="contact_Name">{{ Address.Aname }}</text>
									<text class="contact_Tel">{{ Address.Amobile || Address.uTel }}</text>
								</view>
							</view>
							<text class="iconfont icon-xiangyouxiayiye color_99 size26"></text>
						</block>

						<view class="initAddress" v-else>
							<view class="iconfont icon-tianjia"></view>
							<text class="color_99 size28 m-top20">添加地址</text>
						</view>
					</view>
				</view>

				<view class="Store" v-if="delivery == 2 && Store">
					<view class="Content" @click.stop="storeShow = true">
						<view class="StoreBox">
							<view class="StoreBox_name">
								<view class="iconfont icon-store size36 m-right20 m-left4"></view>
								<text class="Store_name">{{ Store.name }}</text>
							</view>
							<view class="StoreBox_address">
								<view class="iconfont icon-B size38 m-right20 m-left4"></view>
								<text class="Store_address">{{ Store.address }}</text>
							</view>
						</view>
						<view class="iconfont icon-xiangyouxiayiye color_99 size26"></view>
					</view>
					<view class="Place_info">
						<text class="info_title">姓名：</text>
						<input type="text" :value="buy_name" @input="buy_Name" class="info_input" placeholder="请输入购买人姓名" />
					</view>
					<view class="Place_info">
						<text class="info_title">电话：</text>
						<input type="number" :value="buy_phone" @input="buy_Phone" maxlength="11" class="info_input" placeholder="请输入购买人电话" />
					</view>
				</view>

				<view class="Warehouse" v-if="delivery == 5">
					<view class="houseTxt">{{ pageData.toWarehouseContent }}</view>
				</view>
			</view>
		</loading-view>

		<Address :Address="Address" v-if="showAddress" @close="showAddress = false" @Update="getOldAddress"></Address>

		<u-popup :show="storeShow" @close="storeShow = false" mode="bottom" :round="10" closeable>
			<view class="storeWrapper">
				<view class="head">选择门店</view>
				<view class="content" v-if="pickUpStore.length">
					<view class="storeList" v-for="(item, index) in pickUpStore" :key="item.shop_id" @click.stop="selectStore(item)">
						<view class="Info">
							<image :src="$imgUrls(item.logo)" mode="aspectFill" class="Logo" v-if="item.logo"></image>
							<view class="Info_txt">
								<view class="row a-center">
									<text class="Info_name ellipsis">{{ item.name }}</text>
									<text class="color_99 size26 m-left10" v-if="item.distance">{{ $pop.formatDistance(item.distance) }}</text>
								</view>

								<text class="Info_address ellipsis">{{ item.address }}</text>
							</view>
						</view>
						<view class="cou_Rigth" :class="{ Active: item.shop_id == Store.shop_id }">
							<text class="icon-xuanzhong iconfont size28"></text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import Address from './Address.vue';
import LoadingView from './LoadingView.vue';
export default {
	props: ['pageData', 'delivery', 'car_id', 'goods_id'],
	components: {
		Address,
		LoadingView
	},
	data() {
		return {
			buy_name: '',
			buy_phone: '',
			Address: '',
			showAddress: false,
			deliverysArr: [],
			selectedIndex: 0,
			storeShow: false,
			pickUpStore: [],
			Store: ''
		};
	},
	created() {
		let shop_id = uni.getStorageSync('shop_id');
		this.updateShopId(shop_id);
	},

	methods: {
		...mapMutations(['updateShopId', 'updateOrderstatus']),

		getOldAddress() {
			this.$http
				.get({
					url: '/SRA_simMallApi/getOldAddress',
					data: {
						type: 3,
						delivery: this.delivery,
						shop_id: uni.getStorageSync('shop_id') || '',
						goods_id: this.goods_id,
						car_id: this.car_id
					}
				})
				.then((res) => {
					if (res.code != 100) return this.$Toast(res.msg);
					const result = res.data;
					this.Address = result;
					this.buy_name = result.uName || '';
					this.buy_phone = result.uTel || '';
					this.$emit('Usesite', result);
					this.$emit('buy_name', result.uName);
					this.$emit('buy_phone', result.uTel);
					if (!result.operate) return;
					const operate = result.operate;

					if (operate.needOperate == 1) {
						this.updateOrderstatus(false);
						this.$Modals('提示', operate.needOperateText, '取消', '更换地址').then((isflag) => {
							if (isflag) this.showAddress = true;
							return;
						});
					} else if (operate.needOperate == 2 && operate.needOperateShopId) {
						uni.setStorageSync('shop_id', operate.needOperateShopId);
						this.$emit('Use_tabWay', this.delivery);
					} else if (this.pageData.allowBuy == 0) {
						this.updateOrderstatus(false);
					} else {
						this.updateOrderstatus(true);
					}
				});
		},

		Show() {
			this.showAddress = true;
		},
		buy_Name(event) {
			const newVal = event.target.value;
			this.$emit('buy_name', newVal);
		},
		buy_Phone(event) {
			const newVal = event.target.value;
			this.$emit('buy_phone', newVal);
		},

		getDeliveryName(Val) {
			const num = +Val;
			const wayMap = {
				1: this.pageData.toExpressTitle || '快递上门',
				2: this.pageData.toStoreTitle || '门店自提',
				3: this.pageData.toIntraCityServiceTitle || '外卖',
				5: this.pageData.toWarehouseTitle || '暂存仓库'
			};
			return wayMap[num] || '';
		},
		selectTab(index, item) {
			uni.setStorageSync('shop_id', this.ordersShop_id);
			if (this.selectedIndex == index) return;
			this.selectedIndex = index;
			this.$emit('Use_tabWay', item);
		},
		selectStore(Item) {
			uni.setStorageSync('shop_id', Item.shop_id);
			this.$emit('Use_tabWay', 2);
			this.storeShow = false;
		},
		getStore(pickUpStore) {
			const Item = pickUpStore.find((n) => n.selected == 1);
			if (Item) return (this.Store = Item);
			if (this.delivery == 2) this.selectStore(pickUpStore[0]);
		}
	},
	computed: {
		...mapState(['color', 'ordersShop_id'])
	},
	watch: {
		pageData: {
			immediate: true,
			handler(newVal) {
				if (!newVal) return;
				const deliverysValue = newVal.deliverys;
				const deliverysArray = deliverysValue.includes(',') ? deliverysValue.split(',') : [deliverysValue];
				const Flag = deliverysArray.includes(this.delivery);
				if (!Flag && !this.deliverysArr.length) this.$emit('Use_tabWay', deliverysArray[0]);
				if (!this.deliverysArr.length) this.deliverysArr = deliverysArray;

				if (this.deliverysArr.length <= 1) return;
				const findIndex = this.deliverysArr.findIndex((item) => item == this.delivery);
				this.selectedIndex = findIndex;
				if (newVal.pickUpStore.list) {
					this.pickUpStore = newVal.pickUpStore.list;
					this.getStore(newVal.pickUpStore.list);
				}
			}
		},
		delivery: {
			immediate: true,
			handler(newVal) {
				if (!newVal) return;
				this.getOldAddress();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.boxes {
	width: 710rpx;
	margin: 0 auto;
}

@mixin wrapper {
	width: 100%;
	padding: 24rpx;
	background-color: #ffffff;
}

@mixin flexCenter {
	display: flex;
	align-items: center;
}

.deliveryBox {
	width: 100%;
	border-radius: 10rpx;
	overflow: hidden;
	margin: 30rpx auto 0;

	.tabWay {
		width: 100%;
		display: flex;
		align-items: flex-end;
		position: relative;

		.Tabs {
			flex: 1;

			position: relative;
			z-index: 10;
			overflow: hidden;

			.TabItem {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #000;
				height: 70rpx;
				background-color: rgba(249, 243, 232, 0.5);
				// background-color: #f9f3e8;
			}
		}

		.Active {
			border-radius: 20rpx;
			font-weight: bold;

			.TabItem {
				font-size: 32rpx;
				height: 90rpx;
				background-color: #ffffff;
			}
		}

		.subint {
			border-radius: 0 0 20rpx 0;
		}

		.addint {
			border-radius: 0 0 0 20rpx;
		}
	}

	.tabWay::before {
		content: '';
		background-color: #ffffff;
		width: 100%;
		height: 70rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 1;
		border-radius: 20rpx 20rpx 0 0;
	}
}

.WayToggle {
	@include wrapper;

	.expressage {
		display: flex;
		align-items: center;

		.Info {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin-right: 20rpx;

			.downtown {
				display: flex;
				align-items: center;

				&_txt {
					color: #333;
					font-size: 28rpx;
				}

				&_More {
					background-color: var(--color);
					color: #ffffff;
					font-size: 20rpx;
					padding: 0 10rpx;
					border-radius: 20rpx;
					margin-left: 10rpx;
				}
			}

			.address {
				color: #000;
				font-size: 34rpx;
				margin-top: 14rpx;
				font-weight: bold;
			}

			.contact {
				display: flex;
				align-items: center;
				margin-top: 14rpx;

				&_Name {
					color: #333;
					font-size: 28rpx;
					margin-right: 24rpx;
				}

				&_Tel {
					color: #333;
					font-size: 28rpx;
				}
			}
		}

		.initAddress {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 10rpx 0;

			.icon-tianjia {
				color: #999;
				font-size: 68rpx;
			}
		}
	}
}

.Store {
	@include wrapper;

	.Content {
		width: 100%;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.3);
		padding-bottom: 24rpx;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;

		.StoreBox {
			flex: 1;
			display: flex;
			flex-direction: column;

			.StoreBox_name {
				@include flexCenter;

				.shopLogo {
					width: 36rpx;
					height: 36rpx;
					border-radius: 6rpx;
					margin-right: 14rpx;
				}

				.Store_name {
					color: #000;
					font-size: 34rpx;
					font-weight: bold;
				}
			}

			.StoreBox_address {
				display: flex;
				padding-top: 20rpx;

				.Store_address {
					color: #333;
					font-size: 30rpx;
				}
			}
		}
	}

	.Place_info {
		width: 100%;
		display: flex;
		align-items: center;

		.info_title {
			color: #333;
			font-size: 30rpx;
		}

		.info_input {
			flex: 1;
			height: 70rpx;
			padding-left: 10rpx;
			color: #333;
			font-size: 30rpx;
			font-weight: normal;
		}
	}
}

.Warehouse {
	@include wrapper;

	.houseTxt {
		width: 100%;
		min-height: 200rpx;
		color: #333;
		font-size: 30rpx;
	}
}

.storeWrapper {
	width: 100%;
	border-radius: 20rpx 20rpx 0 0;
	overflow: hidden;
	background-color: #f7f8fa;

	.head {
		width: 100%;
		background-color: #ffffff;
		padding: 30rpx 0 30rpx;
		display: flex;
		justify-content: center;
		color: #000;
		font-size: 34rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.3);
	}

	.content {
		width: 100%;
		min-height: 400rpx;
		padding: 0 24rpx 24rpx;
		overflow-y: scroll;

		.storeList {
			width: 100%;
			background-color: #ffffff;
			padding: 20rpx;
			border-radius: 10rpx;
			margin-top: 24rpx;
			display: flex;
			align-items: center;

			.Info {
				flex: 1;
				display: flex;
				align-items: center;

				.Logo {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
					margin-right: 24rpx;
				}

				.Info_txt {
					height: 100rpx;
					display: flex;
					flex-direction: column;
					flex: 1;
					justify-content: space-between;

					.Info_name {
						flex: 1;
						color: #000;
						font-size: 34rpx;
					}

					.Info_address {
						color: #999;
						font-size: 28rpx;
					}
				}
			}

			.cou_Rigth {
				width: 34rpx;
				height: 34rpx;
				border: 1px solid #ccc;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 10rpx;
				margin-left: 24rpx;
			}

			.Active {
				background-color: var(--color) !important;
				border: 1px solid var(--color) !important;
			}
		}
	}
}
</style>
